<template>
    <div>
        <div class="config">
            <div class="back" onclick="window.history.go(-1)"><img src="../assets/images/back.png" alt=""></div>
            <p>消费返佣</p>
        </div>
        <div class="box">
            <router-link to="/mouthIncome/xf">
                <div class="row">
                    <p>本月收益</p>
                    <img src="../assets/images/gd.png" alt="" class="gengduo">
                    <span>{{data.monthprice}}</span>
                </div>
            </router-link>
            <router-link to="/allIncome/xf">
                <div class="row last">
                    <p>全部收益</p>
                    <img src="../assets/images/gd.png" alt="" class="gengduo">
                    <span>{{data.allprice}}</span>
                </div>
            </router-link>
        </div>
        <!-- 消费家族 -->
        <div class="title">消费团队</div>

        <div class="family">
            <Tree :data="baseData" :load-data="loadData" class="tree" :render="renderContent"></Tree>
            <!-- <div class="one">
                <img src="../assets/images/shouqi_.png" alt="" @click="oneshou()" v-show="one">
                <img src="../assets/images/xiala_.png" alt="" @click="onexia()" v-show="two">
                <span>{{data1.name}} ( {{data1.level}} ) {{data1.uid}}</span>
                <div class="two" v-for="item,index in data1.childrens" v-show="two">

                    <img src="../assets/images/shouqi_.png" alt="" @click="twoshou(index,$event)" :id="'aa'+index">
                    <span>{{item.name}} ( {{item.level}} ) {{item.uid}}</span>

                    <div class="three" v-for="item1,index in data1.childrens[index].childrens">
                        <img src="../assets/images/shouqi_.png" alt="" @click="threeshou()">
                        <span>{{item1.name}} ( {{item1.level}} ) {{item1.uid}}</span>
                    </div>
                </div>
            </div> -->

        </div>

    </div>
</template>

<script>
export default {
    name: "xFRebate",
    data() {
        return {
            data: {},
            data1: {},
            one: true,
            two: false,
            baseData: []
        };
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].style.background = "#5aa0c8";
    },
    methods: {
        // oneshou() {
        //     if (this.data1.childrens.length == 0) {
        //         this.$Message.warning("您没有下级");
        //     } else {
        //         this.one = false;
        //         this.two = true;
        //     }
        // },
        // onexia() {
        //     this.one = true;
        //     this.two = false;
        // },
        // twoshou(index, el) {
        //     if (this.data1.childrens[index].childrens.length == 0) {
        //         this.$Message.warning("已经无下级");
        //     } else {
        //         var aa = el.target.id;
        //         document.getElementById(aa).src = "static/xiala_.png";
        //         if (document.getElementById(aa).getAttribute("a") == "1") {
        //             document.getElementById(aa).src = "static/shouqi_.png";
        //             document.getElementById(aa).setAttribute("a", "2");
        //             $("#" + aa)
        //                 .parent(".two")
        //                 .find(".three")
        //                 .css("display", "none");
        //         } else {
        //             document.getElementById(aa).src = "static/xiala_.png";
        //             document.getElementById(aa).setAttribute("a", "1");
        //             $("#" + aa)
        //                 .parent(".two")
        //                 .find(".three")
        //                 .css("display", "block");
        //         }
        //     }
        // },
        // threeshou() {
        //     this.$Message.warning("已经无下级");
        // },
        next(num, root) {
            for (let i = 0; i < root.length; i++) {
                //console.log(root[i].parent);
                if (root[i].parent >= 0) {
                    num[root[i].nodeKey] = num[root[i].parent] + 1;
                } else {
                    num[root[i].nodeKey] = 0;
                }
            }
        },
        renderContent(h, { root, node, data }) {
            let num = {};
            this.next(num, root);
            if (num[node.node.nodeKey] == 0) {
                return h("span", {}, [
                    h("span", data.title.substr(0, data.title.indexOf("("))),
                    h("span", data.title.substr(data.title.indexOf("(")))
                ]);
            }
            switch (num[node.node.nodeKey] % 3) {
                case 1:
                    return h("span", [
                        h(
                            "span",
                            {
                                style: {
                                    color: "red"
                                }
                            },
                            data.title.substr(0, data.title.indexOf("("))
                        ),
                        h("span", data.title.substr(data.title.indexOf("(")))
                    ]);
                case 2:
                    return h("span", [
                        h(
                            "span",
                            {
                                style: {
                                    color: "#f90"
                                }
                            },
                            data.title.substr(0, data.title.indexOf("("))
                        ),
                        h("span", data.title.substr(data.title.indexOf("(")))
                    ]);
                case 0:
                    return h("span", [
                        h(
                            "span",
                            {
                                style: {
                                    color: "blue"
                                }
                            },
                            data.title.substr(0, data.title.indexOf("("))
                        ),
                        h("span", data.title.substr(data.title.indexOf("(")))
                    ]);
            }
        },
        loadData(item, callback) {
            let s = item["title"];
            s = s.substr(s.indexOf(":") + 1, 11);
            let qs = require("qs");
            this.axios({
                method: "post",
                url: `${this.adminUrl}/getDowner`,
                data: qs.stringify({ uid: `${s}` })
            })
                .then(response => {
                    if (response.data.result == 200) {
                        let data = [];
                        let json = response.data.data;
                        for (let i = 0; i < json.length; i++) {
                            let level = parseInt(json[i]["level"]);
                            switch (level) {
                                case 1:
                                    level = "联合创始人";
                                    break;
                                case 2:
                                    level = "执行董事";
                                    break;
                                case 3:
                                    level = "合伙人";
                                    break;
                                case 4:
                                    level = "钻石代理";
                                break;
                            }
                            data.push({
                                title:
                                    json[i]["name"] +
                                    "(" +
                                    level +
                                    ":" +
                                    json[i]["uid"] +
                                    ")",
                                loading: false,
                                children: []
                            });
                        }
                        callback(data);
                    } else {
                        alert("请求失败");
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        }
    },
    mounted() {
        var qs = require("qs");
        this.axios({
            method: "post",
            url: `${this.siteUrl}/getCostTotal`,
            data: qs.stringify({
                uid: localStorage.getItem("uid")
            })
        })
            .then(response => {
                
                if (response.data.result == 200) {
                    this.data = response.data.data;
                } else {
                    alert("请求失败");
                }
            })
            .catch(function(error) {
                console.log(error);
            });
        let level = localStorage.getItem("mylevel");
        switch (Number(level)) {
            case 1:
                level = "联合创始人";
                break;
            case 2:
                level = "执行董事";
                break;
            case 3:
                level = "合伙人";
                break;
            case 4:
                level = "钻石代理";
            break;
        }

        this.baseData.push({
            title:
                localStorage.getItem("name") +
                "(" +
                level +
                ":" +
                localStorage.getItem("uid") +
                ")",
            loading: false,
            children: []
        });

        // var qs1 = require("qs");
        // this.axios({
        //     method: "post",
        //     url: `${this.siteUrl}/getDownerThree`,
        //     data: qs1.stringify({
        //         uid: localStorage.getItem("uid")
        //     })
        // })
        //     .then(response => {
        //         if (response.data.result == 200) {
        //             this.data1 = response.data.data;
        //             // 第一层等级
        //             if (this.data1.level == "1") {
        //                 this.data1.level = "联合创始人";
        //             } else if (this.data1.level == "2") {
        //                 this.data1.level = "执行董事";
        //             } else if (this.data1.level == "3") {
        //                 this.data1.level = "合伙人";
        //             }
        //             // 第二次等级
        //             for (var i in this.data1.childrens) {
        //                 if (this.data1.childrens[i].level == "1") {
        //                     this.data1.childrens[i].level = "联合创始人";
        //                 } else if (this.data1.childrens[i].level == "2") {
        //                     this.data1.childrens[i].level = "执行董事";
        //                 } else if (this.data1.childrens[i].level == "3") {
        //                     this.data1.childrens[i].level = "合伙人";
        //                 }
        //                 // 第三层等级
        //                 for (var j in this.data1.childrens[i].childrens) {
        //                     if (
        //                         this.data1.childrens[i].childrens[j].level ==
        //                         "1"
        //                     ) {
        //                         this.data1.childrens[i].childrens[j].level =
        //                             "联合创始人";
        //                     } else if (
        //                         this.data1.childrens[i].childrens[j].level ==
        //                         "2"
        //                     ) {
        //                         this.data1.childrens[i].childrens[j].level =
        //                             "执行董事";
        //                     } else if (
        //                         this.data1.childrens[i].childrens[j].level ==
        //                         "3"
        //                     ) {
        //                         this.data1.childrens[i].childrens[j].level =
        //                             "合伙人";
        //                     }
        //                 }
        //             }
        //         } else {
        //             alert("请求失败");
        //         }
        //     })
        //     .catch(function(error) {
        //         console.log(error);
        //     });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box {
    width: 94%;
    margin-left: 3%;
    height: 120px;
    border-radius: 3px;
    background: #fff;
    margin-top: 40px;
    overflow: hidden;
}

.row {
    height: 50px;
    background: #fff;
    position: relative;
    border-bottom: 1px solid #f2f2f2;
    margin: 8px;
}
.box .last {
    border-bottom: none;
}

.row .gengduo {
    position: absolute;
    height: 12px;
    top: 19px;
    right: 5px;
}
.row span {
    position: absolute;
    height: 12px;
    top: 16px;
    right: 17px;
}

.row p {
    position: absolute;
    left: 10px;
    top: 13px;
    font-size: 14px;
}
/* 消费家族 */
.family {
    width: 94%;
    background: #fff;
    margin-left: 3%;
    margin-top: 50px;
    border-radius: 3px;
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;
    overflow: scroll;
}
.title {
    width: 36%;
    height: 40px;
    line-height: 40px;
    background: #fff;
    text-align: center;
    border-radius: 5px;
    color: #5aa0c8;
    position: absolute;
    margin-top: 30px;
    left: 32%;
    box-shadow: 0px 0px 10px 0px #78abc8;
    z-index: 111;
}
.family span {
    margin-left: 5px;
}
.family .one {
    width: 90%;
    margin-left: 5%;
    line-height: 40px;
}
.family img {
    height: 8px;
    vertical-align: middle;
}
.family .two {
    width: 90%;
    margin-left: 10%;
}
.family .three {
    width: 90%;
    margin-left: 10%;
    display: none;
}
.family i {
    font-style: normal;
    color: #5aa0c8;
}
.tree {
    margin-left: 10px;
}
</style>
